<template>
  <div class="bg-white w-full h-full">
    <div class="text-[#6F6F6F] text-[14px] ml-3">我的逛逛达人</div>
    <div class="overflow-y-auto px-2 mt-2">
      <div
        class="min-w-[260px] grid grid-cols-[minmax(15px,7%)minmax(auto,23%)minmax(auto,30%)minmax(auto,20%)minmax(auto,20%)] gap-1 text-[#000000] text-[12px]"
      >
        <div></div>
        <div class="font-bold text-left">达人昵称</div>
        <div class="font-bold text-center">逛逛号</div>
        <div class="font-bold text-center">领域类目</div>
        <div class="text-right mb-1">
          <img
            :src="GuangHe"
            class="inline-block w-[34px] h-[18px] cursor-pointer"
            @click="() => handleCopyAllToExcel()"
          />
        </div>
        <template v-for="(item, index) in data" :key="index">
          <div class="text-right overflow-hidden text-ellipsis text-nowrap">
            {{ (item?.sort ?? '1') + '.' }}
          </div>
          <div
            class="text-left overflow-hidden text-ellipsis text-nowrap"
            :class="[item.pass_con == 0 ? 'text-[#262626]' : 'text-[#FF5D5D]']"
          >
            {{ item.nick_name }}
          </div>
          <div
            class="text-center overflow-hidden text-ellipsis text-nowrap"
            :class="[item.pass_con == 0 ? 'text-[#262626]' : 'text-[#FF5D5D]']"
          >
            {{ item.guang_id }}
          </div>
          <div
            class="text-center overflow-hidden text-ellipsis text-nowrap"
            :class="[item.pass_con == 0 ? 'text-[#262626]' : 'text-[#FF5D5D]']"
          >
            {{ item.domain }}
          </div>
          <div class="text-left flex flex-row gap-0.5 justify-end text-[10px]">
            <img
              :src="Arrow"
              class="select-none w-[16px] h-[16px] cursor-pointer"
              @click="() => handlePublish(item.agent_id)"
            />
            <div class="text-center min-w-4 h-4 leading-4 rounded-full bg-[#009944] text-white">
              {{ item.pass_con }}
            </div>
            <div class="text-center min-w-4 h-4 leading-4 rounded-full bg-[#FF5D5D] text-white">
              {{ item.reject_con }}
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getMyAgentListApi } from '@main/service/publishflow';
import GuangHe from '@shared/assets/images/guanghe.webp';
import Arrow from '@shared/assets/images/arrow.webp';
import { setObjToUrlParams } from '@shared/utils/url';
import { copyTextToClipboard } from '@shared/hooks/web/useCopyToClipboard';
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import type { MyAgentListRes } from '@main/service/publishflow/type';
interface DataItem extends MyAgentListRes {}
const data = ref<DataItem[]>([]);

const handleCopyAllToExcel = () => {
  if (data.value.length == 0) return;

  let strs = data.value.map(
    (item) =>
      `"${item.nick_name}"\t"${item.guang_id}"\t"${item.domain}"\t"${item.pass_con}"\t"${item.reject_con}"`
  );

  if (copyTextToClipboard(strs.join('\n'))) message.success('内容已复制到剪贴板');
  else message.error('复制失败，请重试');
};

const handlePublish = (agent_id: string) => {
  const url = setObjToUrlParams(
    'https://huodong.taobao.com/wow/z/guang/gg_publish/gg-batch-video?wh_showError=true&ugc_scene=agent_batch_publish&pageType=video&site=guangguang&agentType=mcn',
    { agentId: agent_id }
  );
  window.clientAppSdk.shell.openExternal(url);
};

const getDataList = async () => {
  const res = await getMyAgentListApi();
  data.value = res;
};

onMounted(() => {
  getDataList();
});
</script>
<style lang="less" scoped></style>
